<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'
import { storage } from '../../stores/mystore/auth'

const router = useRouter()
const route = useRoute()
// @ts-ignore
const { username, tel_num } = storage.get('userInfo', 'local')

// 模拟获取订单详情（实际可根据route.params.id请求后端）
const order = {
  id: '1000001',
  title: '鱼儿想要-*50个',
  desc: '下单时间：2024-06-01 12:00',
  thumb: 'https://img.yzcdn.cn/vant/cat.jpeg',
  price: '1.74',
  status: '交易成功',

}
const orderInfo = reactive({
  id: '',
  order_buy_user: '',
  order_buy_user_id: '',
  order_buy_user_tel: '',
  order_command: '',
  order_create_tm: '',
  order_desc: '',
  order_good_id: '',
  order_img_url: '',
  order_name: '',
  order_operate_tm: '',
  order_other_info: '',
  order_price: 0,
  order_sum: 0,
  order_total: 0,
  order_type: 0,
})
// 获取订单详情
async function queryOrderDetail(id: string) {
  try {
    // @ts-ignore
    const res = await request.post('/dragon/queryOrderById', { id })
    console.log(res, '获取订单详情成功')
    if (res.code === 200) {
      Object.assign(orderInfo, res.data)
    }
    else {
      console.error(`获取订单详情失败: ${res.message}`)
    }
  }
  catch (error) {
    console.error(`获取订单详情失败`, error)
  }
}

onMounted(() => {
  // @ts-ignore
  queryOrderDetail(route.params.id)
})

const statusIcon = order.status === '交易成功' || order.status === '处理完成' ? 'passed' : order.status === '处理中' ? 'clock-o' : 'warning-o'
const statusColor = order.status === '交易成功' || order.status === '处理完成' ? '#07c160' : order.status === '处理中' ? '#ffb300' : '#ff4d4f'

function goBack() {
  router.back()
}
</script>

<template>
  <div class="order-detail-container">
    <van-nav-bar title="订单详情" left-arrow @click-left="goBack" />
    <div class="order-status-bar">
      <van-icon v-if="orderInfo.order_type === 0" name="warning-o" color="#ff976a" size="30" />
      <van-icon v-if="orderInfo.order_type === 1" name="clock-o" color="#3498db" size="30" />
      <van-icon v-if="orderInfo.order_type === 2" name="passed" color="#07c160" size="30" />
      <span v-if="orderInfo.order_type === 0" class="order-status-text">订单待处理</span>
      <span v-if="orderInfo.order_type === 1" class="order-status-text1">订单处理中</span>
      <span v-if="orderInfo.order_type === 2" class="order-status-text2">订单已完成</span>
    </div>
    <div class="order-section">
      <div class="order-section-title">
        商品信息
      </div>
      <div class="order-goods">
        <img class="goods-thumb" :src="orderInfo.order_img_url">
        <div class="goods-info">
          <div class="goods-title">
            {{ orderInfo.order_name }}
          </div>
          <div class="goods-desc">
            {{ orderInfo.order_desc }}
          </div>
        </div>
        <div class="goods-price">
          ￥{{ orderInfo.order_sum }}
        </div>
      </div>
    </div>
    <div class="order-section">
      <div class="order-section-title">
        订单信息
      </div>
      <div class="order-info-row">
        <span>订单编号</span><span>{{ orderInfo.id }}</span>
      </div>
      <div class="order-info-row">
        <span>下单时间</span><span>{{ orderInfo.order_create_tm }}</span>
      </div>
      <div class="order-info-row">
        <span>完成时间</span><span>{{ orderInfo.order_operate_tm ? orderInfo.order_operate_tm : '未完成' }}</span>
      </div>
      <div class="order-info-row">
        <span>订单状态</span><span>{{ orderInfo.order_type === 0 ? '待处理' : orderInfo.order_type === 1 ? '处理中...' : '已完成' }}</span>
      </div>
    </div>
    <div class="order-section">
      <!-- <div class="order-section-title">收货信息</div> -->
      <div class="order-info-row">
        <span>收货人</span><span>{{ username }}</span>
      </div>
      <div class="order-info-row">
        <span>联系电话</span><span>{{ tel_num }}</span>
      </div>
      <!-- <div class="order-info-row"><span>收货地址</span><span>北京市朝阳区XX路88号</span></div> -->
    </div>
    <!-- <div class="order-actions">
      <van-button type="primary" block>再次购买</van-button>
    </div> -->
  </div>
</template>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background: #f7f7fa;
  padding-bottom: 60px;
}
.order-status-bar {
  display: flex;
  align-items: center;
  padding: 18px 16px 8px 16px;
  background: #fff;
}
.order-status-text {
  color: #ff976a;
  font-size: 18px;
  margin-left: 8px;
  font-weight: 500;
}
.order-status-text1 {
  color: #3498db;
  font-size: 18px;
  margin-left: 8px;
  font-weight: 500;
}
.order-status-text2 {
  color: #07c160;
  font-size: 18px;
  margin-left: 8px;
  font-weight: 500;
}
.order-section {
  background: #fff;
  margin-top: 12px;
  border-radius: 10px;
  padding: 16px;
}
.order-section-title {
  font-size: 15px;
  color: #888;
  margin-bottom: 10px;
}
.order-goods {
  display: flex;
  align-items: center;
  gap: 12px;
}
.goods-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}
.goods-info {
  flex: 1;
}
.goods-title {
  font-size: 16px;
  font-weight: 500;
  color: #222;
}
.goods-desc {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.goods-price {
  color: #ee0a24;
  font-size: 16px;
  font-weight: bold;
}
.order-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #444;
  margin-bottom: 8px;
}
.order-actions {
  margin: 24px 16px 0 16px;
}
</style>
